var c = document.getElementById('c');
var ctx = c.getContext('2d');
var img = document.getElementById('curImg');

var text = 'Canvas';
ctx.font = '128px Arial';
var measure = ctx.measureText(text);

ctx.save();
ctx.fillStyle = '#ddd';
ctx.fillRect(0, 0, c.width, c.height);
ctx.restore();

//创建渐变
ctx.save();
var gradient = ctx.createLinearGradient(0, 0, measure.width, 128); //开始和结束点均已画布为参考系
gradient.addColorStop(0, 'blue');
gradient.addColorStop(.5, 'white');
gradient.addColorStop(1, 'red');
ctx.fillStyle = gradient;
ctx.fillText(text, 0, 128);
ctx.restore();

//创建图案
ctx.save();
var patter = ctx.createPattern(img, 'repeat');
ctx.fillStyle = patter;
ctx.fillText(text, 0, 256);
ctx.restore();